<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>房产管理</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="css/main.css" media="all" />
    <script type="text/javascript" src="lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/index.css" />
  </head>
  <body>
    <div class="x-nav">
      <span class="layui-breadcrumb">
        <a><cite>首页</cite></a>
        <a><cite>房产管理</cite></a>
        <a><cite>房产列表</cite></a>
      </span>
      <a
        class="layui-btn layui-btn-small"
        style="line-height: 1.6em; margin-top: 3px; float: right"
        href="javascript:location.replace(location.href);"
        title="刷新"
        ><i class="layui-icon" style="line-height: 30px">ဂ</i></a
      >
    </div>
    <div class="x-body" id="app">
      <!-- 时间组件 -->
      <span class="demonstration">时间范围</span>
      <el-date-picker
        @change="dateChange"
        v-model="selectDate"
        type="daterange"
        range-separator="--"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      ></el-date-picker>
      <span class="demonstration">搜索关键字</span>
      <el-input v-model="searchMap.name" style="width: 20%" placeholder="请输入小区名称"></el-input>
      <el-button type="warning" icon="el-icon-search" @click="search()">搜索</el-button>
      <!-- 页面主体内容 -->
      <xblock>
        <button class="layui-btn layui-btn-danger" @click="delAll()" :disabled="checkedIDs == ''">
          <i class="layui-icon">&#xe640;</i>批量删除
        </button>
        <button class="layui-btn" @click="admin_add('添加','homeadd.html','1000','600')">
          <i class="layui-icon">&#xe608;</i>添加
        </button>
        <span class="x-right" style="line-height: 40px"
          >共有数据：<span class="layui-badge">2</span> 条</span
        >
      </xblock>
      <table class="layui-table">
        <thead>
          <tr>
            <th>
              <input
                type="checkbox"
                id="allChecked"
                :checked="checkedIDs.length === houseList.length"
                @click="allChecked"
              />
            </th>
            <th>ID</th>
            <th>所属小区</th>
            <th>栋数名称</th>
            <th>房产编号</th>
            <th>房产名称</th>
            <th>户主名称</th>
            <th>联系方式</th>
            <th>房间数</th>
            <th>单元</th>
            <th>楼层</th>
            <th>描述</th>
            <th>入住时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="x-img">
          <tr v-for="item in houseList" :key="item.id">
            <td>
              <input type="checkbox" :value="item.id" :id="'id'+item.id" v-model="checkedIDs" />
            </td>
            <td>{{item.id}}</td>
            <td>{{item.communityName}}</td>
            <td>{{item.buildingName}}</td>
            <td>{{item.code}}</td>
            <td>{{item.name}}</td>
            <td>{{item.ownerName}}</td>
            <td>{{item.name}}</td>
            <td>{{item.telephone}}</td>
            <td>{{item.roomNum}}</td>
            <td>{{item.unit}}</td>
            <td>{{item.floor}}</td>
            <td>{{item.description}}</td>
            <td>{{dateFormat(item.liveTime)}}</td>
            <td class="td-manage">
              <!-- 编辑按钮 -->
              <a
                title="编辑"
                href="javascript:;"
                @click="house_edit('编辑','homeadd.html',item.id,'1000','600')"
                class="ml-5"
                style="text-decoration: none"
              >
                <i class="layui-icon">&#xe642;</i>
              </a>
              <a
                title="删除"
                href="javascript:;"
                @click="admin_delone(item.id)"
                style="text-decoration: none"
              >
                <i class="layui-icon">&#xe640;</i>
              </a>
            </td>
          </tr>
        </tbody>
      </table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        layout="prev, pager, next, sizes"
        :page-sizes="[2,10,20]"
        style="text-align: right"
        :total="total"
      >
      </el-pagination>
    </div>
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/x-layui.js" charset="utf-8"></script>
    <!-- 导入jS -->
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/moment.min.js"></script>
    <script>
      let app = new Vue({
        el: '#app',
        data: {
          checkedIDs: [],
          houseList: [],
          total: 10,
          searchMap: { startTime: '', endTime: '', name: '', pageNum: '1', pageSize: '2' },
          selectDate: ['', ''],
          pickerOptions: {
            shortcuts: [
              {
                text: '最近一周',
                onClick(picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                  picker.$emit('pick', [start, end])
                }
              },
              {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                  picker.$emit('pick', [start, end])
                }
              },
              {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date()
                  const start = new Date()
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                  picker.$emit('pick', [start, end])
                }
              }
            ]
          }
        },
        methods: {
          house() {
            axios.post('/house/search', this.searchMap).then(res => {
              this.houseList = res.data.data
              this.total = res.data.total
            })
          },
          search() {
            this.searchMap.pageNum = '1'
            this.house()
          },
          admin_delone(id) {
            this.$confirm('此操作将永久房产信息，是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                //   把选中的id封装到集合中
                this.checkedIDs.push(id)
                //   执行删除操作
                axios.post('/house/del', this.checkedIDs).then(res => {
                  if (res.data.flag) {
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    })
                  }
                })
                // 把页码设置为1，重新获取数据
                this.searchMap.pageNum = '1'
                this.house()
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
          },
          delAll() {
            this.$confirm('此操作将永久房产信息，是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
              .then(() => {
                //   执行删除操作
                axios.post('/house/del', this.checkedIDs).then(res => {
                  if (res.data.flag) {
                    this.$message({
                      type: 'success',
                      message: '删除成功!'
                    })
                  }
                  this.checkedIDs = []
                  // 把页码设置为1，重新获取数据
                  this.searchMap.pageNum = '1'
                  this.house()
                })
              })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
          },
          // 全选方法
          allChecked() {
            if (this.checkedIDs.length === this.houseList.length) {
              this.checkedIDs = []
            } else {
              this.checkedIDs = []
              this.houseList.forEach(item => {
                this.checkedIDs.push(item.id)
              })
            }
          },
          //   每页数量发生变化后触发的方法
          handleSizeChange(pageSize) {
            this.searchMap.pageSize = pageSize.toString()
            this.house()
          },
          //   页码变化触发方法
          handleCurrentChange(pageNum) {
            this.searchMap.pageNum = pageNum.toString()
            this.house()
          },
          //  时间区间发生改变，searchMap中时间区间条件也要发生变化
          dateChange() {
            //   没有选择时间，或者清理了时间条件，当前时间区间为空字符串
            if (this.selectDate == null || this.selectDate.length == 0) {
              this.searchMap.startTime = ''
              this.searchMap.endTime = ''
            } else {
              // 当时间区间不为空，往searchMap中添加条件
              if (this.selectDate[0] != null && this.selectDate[0] != '') {
                this.searchMap.startTime = this.dateFormat(this.selectDate[0])
              }
              if (this.selectDate[1] != null && this.selectDate[1] != '') {
                this.searchMap.endTime = this.dateFormat(this.selectDate[1])
              }
            }
          },
          //   日期格式化
          // date 进行日期格式化的日期； format 格式化的样式
          dateFormat(date, format) {
            if (format == null || format == '') {
              format = 'YYYY-MM-DD HH:mm:ss'
            }
            return moment(date).format(format)
          },
          /*添加*/
          admin_add(title, url, w, h) {
            this.x_admin_show(title, url, w, h)
          },
          //编辑
          house_edit(title, url, id, w, h) {
            url = url + '?id=' + id
            this.x_admin_show(title, url, w, h)
          },
          /*弹出层*/
          /*
            参数解释：
            title	标题
            url		请求的url
            id		需要操作的数据id
            w		弹出层宽度（缺省调默认值）
            h		弹出层高度（缺省调默认值）
        */
          x_admin_show(title, url, w, h) {
            if (title == null || title == '') {
              title = false
            }
            if (url == null || url == '') {
              url = '404.html'
            }
            if (w == null || w == '') {
              w = 800
            }
            if (h == null || h == '') {
              h = $(window).height() - 100
            }

            layer.open({
              type: 2,
              area: [w + 'px', h + 'px'],
              offset: '30px',
              fix: true, //不固定
              maxmin: true,
              shadeClose: true,
              shade: 0.4,
              title: title,
              content: url,
              cancel: function (index, layero) {
                //   关闭弹出刷新数据
                app.house()
              }
            })
          },

          /*关闭弹出框口*/
          x_admin_close() {
            var index = parent.layer.getFrameIndex(window.name)
            parent.layer.close(index)
          }
        },
        created() {
          this.house()
          layui.use(['laydate', 'element', 'laypage', 'layer'], function () {
            $ = layui.jquery //jquery
            layer = layui.layer //弹出层
            okLoading.close($)
            layer.ready(function () {
              //为了layer.ext.js加载完毕再执行
              layer.photos({
                photos: '#x-img'
                //,shift: 5 //0-6的选择，指定弹出图片动画类型，默认随机
              })
            })
          })
          this.search()
        },
        computed: {
          pageSize() {
            return parseInt(this.searchMap.pageSize)
          },
          pageNum() {
            return parseInt(this.searchMap.pageNum)
          }
        }
      })
    </script>
  </body>
</html>
